Vuetify — Select

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Selects

We can create a select dropdown with the v-select component.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select :items="items" label="Fruit"></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
  }),
};
</script>

We have the v-select component with the items prop.

items takes an array of items to display as the choices.

label has the dropdown label.

The disabled and readonly attributes can be used with v-select .

disabled lets us disable the dropdown with disabled styles displayed.

readonly also makes it disabled but no style changes are applied.

We can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select :items="items" label="Fruit" disabled></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
  }),
};
</script>

to disable the v-select component.

And we can do add make it read-only with:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select :items="items" label="Fruit" readonly></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
  }),
};
</script>

Options

We can add various options to the v-select component.

chips makes the selected items look like chips.

multiple enables multiple selections.

attach specifies which DOM element the component should attach to.

The value is a selector for the element we want to attach to.

solo renders the dropdown without the label.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select :items="items" label="Fruit" multiple></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
  }),
};
</script>

to enable multiple selections.

Icons

We can add prepended and appended icons to our dropdown.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select
          v-model="fruit"
          :items="items"
          menu-props="auto"
          label="Select"
          hide-details
          prepend-icon="mdi-domain"
          single-line
        ></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
    fruit: "",
  }),
};
</script>

We have the prepend-icon prop to add the icon to the left of the dropdown.

We can add an icon to the right of the dropdown with the append-outer-icon prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select
          v-model="fruit"
          :items="items"
          menu-props="auto"
          label="Select"
          hide-details
          append-outer-icon="mdi-domain"
          single-line
        ></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
    fruit: "",
  }),
};
</script>

In both examples, we just set the prop value to the string with the icon name.

Conclusion

We can add dropdowns with various kinds of options with Vuetify.